import 'package:pacsun/components/appbar.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
// ------------------------------------------------------------------------------------- //
import 'package:pacsun/view/task/theme/app_colors.dart';
import 'package:flutter/services.dart';
// ------------------------------------------------------------------------------------- //
// ------------------------------------------------------------------------------------- //
import '../../utils/notifyMsg.dart' show notifyMsg;
import '../../utils/theme.dart' show loginInBlueThemeData;
import '../../model/accountModel.dart' show AccountModel, LoginRequestModel;
import '../../provider/termsProv.dart' show TermsProvider;

// ------------------------------------------------------------------------------------- //
class RegisterPage extends StatefulWidget {
  const RegisterPage({super.key});

  @override
  State<RegisterPage> createState() => _RegisterPagePageState();
}

class _RegisterPagePageState extends State<RegisterPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CommonTransparentAppBar(),
      backgroundColor: Colors.black,
      body: SingleChildScrollView(
        padding: EdgeInsets.symmetric(horizontal: 16),
        child: LoginFormWidget(),
      ),
    );
  }
}

class LoginFormWidget extends StatefulWidget {
  const LoginFormWidget({super.key});
  @override
  State<LoginFormWidget> createState() => _LoginFormWidgetState();
}

class _LoginFormWidgetState extends State<LoginFormWidget> {
  final LoginRequestModel loginRequestModel =
      LoginRequestModel(username: '', password: '');
  final loginGloKey = GlobalKey<FormState>();
  final FocusNode passwordFocusNode = FocusNode();
  final FocusNode submitFocusNode = FocusNode();
  @override
  void dispose() {
    // who creates the node is responsible for disposing it.
    passwordFocusNode.dispose();
    submitFocusNode.dispose();
    super.dispose();
  }

  Map<String, String> inputMap = {
    'Fist Name': '',
    'Last Name': '',
    'Email': '',
    'Password': '',
    'Confirm Password': '',
    'Phone': '',
    'zip': '',
    'Birthday(MM/DD)': '',
  };
  bool radioValue = false;
  // List<String> radios = ['Women', 'Men', 'Unisex', 'Kids'];
  List<String> radios = [
    'Women',
    'Men',
    'Unisex',
  ];
  bool checkValue = false;

  String selectRadio = 'Women';

  @override
  Widget build(BuildContext context) {
    return Form(
      key: loginGloKey,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('Register',
              style: customTextStyle(fontSize: 35, fontWeight: 900)),
          SizedBox(height: 35.h),
          ...inputMap.entries.map((e) {
            return InputField(
              label: e.key,
              accountModel: loginRequestModel,
              targetNode: passwordFocusNode,
            );
          }),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'shopping for (check all that apply)',
                style: customTextStyle(fontSize: 14, fontWeight: 600),
              ),
              Transform.translate(
                offset: Offset(-16.r, 0),
                child: Row(
                  children: radios
                      .map(
                        (radio) => Row(
                          children: [
                            Radio(
                              value: radio,
                              groupValue: selectRadio,
                              activeColor: AppColors.white,
                              fillColor: WidgetStateProperty.resolveWith<Color>(
                                  (states) {
                                if (states.contains(WidgetState.selected)) {
                                  return AppColors.white; // 选中时的颜色
                                }
                                return AppColors.white; // 未选中时的颜色
                              }),
                              onChanged: (String? value) {
                                setState(() {
                                  selectRadio = value ?? '';
                                });
                              },
                            ),
                            Text(
                              radio,
                              style: customTextStyle(
                                fontSize: 12,
                              ),
                            )
                          ],
                        ),
                      )
                      .toList(),
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  SizedBox(
                    width: 17.w,
                    child: Checkbox(
                      value: checkValue,
                      onChanged: (bool? value) {
                        setState(() {
                          checkValue = value ?? false;
                        });
                      },
                      side: const BorderSide(color: AppColors.white, width: 2),
                      activeColor: AppColors.white,
                      checkColor: AppColors.black,
                      fillColor:
                          WidgetStateProperty.resolveWith<Color>((states) {
                        if (states.contains(WidgetState.selected)) {
                          return AppColors.white; // 选中时的颜色
                        }
                        return AppColors.white; // 未选中时的颜色
                      }),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(100),
                      ),
                    ),
                  ),
                  SizedBox(width: 8.w),
                  Expanded(
                    child: Text(
                      'Sign me up to receive email updates from Pacsun.',
                      maxLines: 2,
                      softWrap: true,
                      style: customTextStyle(height: 1.3, fontSize: 11),
                    ),
                  )
                ],
              ),
              // Row(
              //   crossAxisAlignment: CrossAxisAlignment.start,
              //   children: [
              //     SizedBox(
              //       width: 17.w,
              //       child: Checkbox(
              //         value: checkValue,
              //         onChanged: (bool? value) {
              //           setState(() {
              //             checkValue = value ?? false;
              //           });
              //         },
              //         side: const BorderSide(color: AppColors.white, width: 2),
              //         activeColor: AppColors.white,
              //         checkColor: AppColors.black,
              //         fillColor:
              //             WidgetStateProperty.resolveWith<Color>((states) {
              //           if (states.contains(WidgetState.selected)) {
              //             return AppColors.white; // 选中时的颜色
              //           }
              //           return AppColors.white; // 未选中时的颜色
              //         }),
              //         shape: RoundedRectangleBorder(
              //           borderRadius: BorderRadius.circular(100),
              //         ),
              //       ),
              //     ),
              //     SizedBox(width: 8.w),
              //     Expanded(
              //       child: Text.rich(
              //         style: customTextStyle(fontSize: 10),
              //         TextSpan(
              //           children: [
              //             TextSpan(
              //               text:
              //                   'exclusive collections, promotions & more.By checking this box you agree to receive recurringautomated promotional and personalized marketing textmessages(e.gcart reminders)from Pacsun at the callnumberrused whensianing up',
              //             ),
              //             TextSpan(
              //               text:
              //                   '.Consent is not a condition ofany purchase.ReplyHELP for help and STOp to cancel. Msgfrequency varies.Msg &data rates may apply. To access andretain a record of yourconsent click',
              //             ),
              //             TextSpan(
              //               text: "'Print or 'save'on yourcomputer",
              //             ),
              //             TextSpan(
              //               text:
              //                   '.Visit ElectronicSianatures in Global and NationgCommerce Act ("E-Sian Act"Messaging Terms & Conditions Terms ofUse,',
              //               // style: customTextStyle(opacity: 0.5, fontSize: 10),
              //             ),
              //             TextSpan(
              //               text: 'and',
              //             ),
              //             TextSpan(
              //               text: 'Privacy Policy',
              //               //  style: customTextStyle(opacity: 0.5, fontSize: 11),
              //             ),
              //             TextSpan(
              //               text: 'for more details\n',
              //             ),
              //             TextSpan(
              //               text:
              //                   '\nI email address and/orunderstand that byDroVIdinc[I1Yandclickina',
              //             ),
              //             TextSpan(
              //               text:
              //                   '\nI email address and/orunderstand that byDroVIdinc[I1Yandclickina "',
              //             ),
              //             TextSpan(
              //               text:
              //                   "REGISTER, and separatelynoole ohohe numoelby opting into email and/or text updates thatlamotngintofnanciglincentives by pasUn For more nforgton gbout ou!nancicncentive programs, includina material terms, pleasevisit our Privacy Policy. By sianineup for Pacsun RewardsEmaland Texts, you confirm you are at least 13 years of ageandand Privacy Policy, includingagree to Pacsun's ",
              //             ),
              //             TextSpan(
              //               text:
              //                   'Terms of Useeceipt of Pacsunemail and text message communicationsYou may unsubscribe at any time. Your ',
              //             ),
              //             TextSpan(
              //               text:
              //                   '\$!reward will bedeposited 24 hours after signing up',
              //             )
              //           ],
              //         ),
              //       ),
              //     )
              //   ],
              // ),
            ],
          ),
          LoginButton(),
          SizedBox(height: 14.h),
          InkWell(
            onTap: () => Navigator.of(context).pop(),
            child: Center(
              child: Text.rich(
                style: customTextStyle(fontSize: 14, opacity: 0.5),
                TextSpan(
                  style: TextStyle(fontWeight: FontWeight.bold),
                  children: [
                    TextSpan(text: "Already Have An Account?  "),
                    TextSpan(
                        text: 'SIGN IN',
                        style: customTextStyle(fontSize: 16, fontWeight: 600))
                  ],
                ),
              ),
            ),
          ),
          SizedBox(height: 30.h),
        ],
      ),
    );
  }
}

class InputField extends StatelessWidget {
  const InputField({
    super.key,
    required this.accountModel,
    required this.label,
    this.currentNode,
    this.targetNode,
  });

  final String label;
  final AccountModel accountModel;
  final FocusNode? currentNode;
  final FocusNode? targetNode;

  @override
  Widget build(BuildContext context) => Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(label, style: customTextStyle(fontSize: 14, opacity: .9)),
          SizedBox(height: 8.h),
          TextFormField(
            focusNode: currentNode,
            style: customTextStyle(fontSize: 14, opacity: 0.5),
            cursorColor: AppColors.white,
            decoration: InputDecoration(
              fillColor: AppColors.containerBg,
              focusColor: AppColors.white,
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10.0),
                borderSide: BorderSide(
                  color: Colors.transparent, // 边框颜色
                  width: 2.0, // 边框宽度
                ),
              ),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10.0),
                borderSide: BorderSide(
                  color: AppColors.white, // 聚焦时边框颜色
                  width: 1.r, // 边框宽度
                ),
              ),
            ),
            onSaved: (username) => accountModel.username = username!,
            onFieldSubmitted: (_) =>
                FocusScope.of(context).requestFocus(targetNode),
          ),
          SizedBox(
            height: 16.h,
          )
        ],
      );
}

//
class LoginButton extends StatelessWidget {
  const LoginButton({super.key});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => {},
      child: Container(
        alignment: Alignment.center,
        padding: EdgeInsets.symmetric(vertical: 18).r,
        margin: EdgeInsets.only(top: 15).r,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8).r,
          color: AppColors.white,
        ),
        child: Text(
          'REGISTER',
          style: customTextStyle(
            fontSize: 20,
            fontWeight: 700,
            color: FamilyTextColor.black,
          ),
        ),
      ),
    );
  }
}
